<template>
	<view class="container">
		<view class="iner">基本信息</view>
		<view class="returnGoods">


			<view class="headerNumber" style="border: 1rpx solid #e8e8e8;">
				<view style="font-size: 24rpx;">入库类型</view>
				<view style="font-size: 26rpx;color: #999999 ;">其它入库</view>
			</view>
			<view class="headerNumber" @click="handleSupplier">
				<view style="font-size: 24rpx;">供应商</view>
				<view style="font-size: 26rpx;color: #999999 ;">
					<view>{{modelSupplier.name || '请选择供应商'}}></view>
				</view>
			</view>
			<view class="headerNumber" style="border: 1rpx solid #e8e8e8;" @click="handleSupplierGoods">
				<view style="font-size: 24rpx;">商品</view>
				<view style="font-size: 26rpx;color: #999999;" v-if="materials.length==0">请选择商品></view>
				<view class="goodsStyle" v-if="materials.length>0">
					<span v-for="(item,index) in materials" :key="index">
						{{item.supplierName}},
					</span>
				</view>
			</view>
			<view class="headerNumber" style="border: 1rpx solid #e8e8e8;" @click="dateShow=true">
				<view style="font-size: 24rpx;">有效日期</view>
				<view style="font-size: 26rpx;color: #999999 ;">{{data?formatTimestamp(data):'请选择有效期'}}></view>
			</view>

		</view>

		<view class="iners">

		</view>
		<view class="material" v-if="materials.length>0">
			<!-- 主要原料 -->
			<view class="picking">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view v-for="(item,index) in materials" :key="index">
						<view class="goodName">{{item.supplierName}}</view>
						<view class="selectBlock">
							<view class="leftBlock">
								<view class="select" @click.stop="handleGroups(index)">
									<view v-if="item.name" class="lib">{{item.name}}</view>
									<view v-else style="color: #999999 ;">选货位</view>
									<image style="width: 16rpx;height: 16rpx;" src="/static/work/bottom.png" mode="" />
								</view>
								<view class="select">
									<input type="number" style="font-size: 24rpx;display: flex;align-items: center;"
										v-model="item.batchNumber" placeholder-style="font-size:24rpx;color:#999999;" 
										placeholder="请输入批次">
								</view>
								<view class="select">
									<input type="number" style="font-size: 24rpx;display: flex;align-items: center;"
										v-model="item.count" placeholder-style="font-size:24rpx;color:#999999;" placeholder="请输入数量">
									<!-- <view style="font-size: 24rpx;">kg</view> -->
								</view>
								<view class="select">
									<input type="number" style="font-size: 24rpx;display: flex;align-items: center;"
										v-model="item.price" placeholder-style="font-size:24rpx;color:#999999;" placeholder="请输入单价">
									<!-- <view style="font-size: 24rpx;">kg</view> -->
								</view>
								<view class="select">
									<input type="text" style="font-size: 24rpx;display: flex;align-items: center;"
										v-model="item.remark" placeholder-style="font-size:24rpx;color:#999999;" placeholder="请输入备注">
									<!-- <view style="font-size: 24rpx;">kg</view> -->
								</view>
							</view>
							
							<view class="selectImage" @click="handeleRemoveMaterials(index)">
								<image style="width: 34rpx;height: 34rpx;" src="/static/work/cg_add02.png" mode="" />
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>

		<view class="submit">
			<u-button :loading='loading' :disabled="disabled" :custom-style="customStyleBtn1"
				@click="submit">提交入库单</u-button>
		</view>

		<!-- 仓库 -->
		<u-picker :show="libraryShow" ref="uPicker" @cancel="libraryShow=false" :columns="columnslibrary"
			@confirm="confirm" @change="changeHandler"></u-picker>

		<!-- 有效期 -->
		<u-datetime-picker @cancel="dateShow=false" @confirm="handeleDateConfirm" :show="dateShow" v-model="validity"
			mode="date"></u-datetime-picker>
		<Warehouse @setValueName="handleSetValueName"  ref="warehouseRef"/>
	</view>
</template>

<script>
	import Warehouse from '@/components/Warehouse.vue'
	import {
		constructGroups
	} from '@/utils/common.js'
	import {
		getStockIn,
		simpleList,
		getWarehouse
	} from '@/api/store.js'
	export default {
		components:{
			Warehouse
		},
		data() {
			return {
				dateShow: false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				validity:Number(new Date()),
				order: '', //单号
				materials: [], //商品
				columnslibrary: [], //仓库一级数据
				columnData: [], //仓库二级数据
				arr: [],
				disabled: true, //按钮
				loading: false, //按钮
				libraryShow: false, //控制选择仓库弹窗
				hostIndex: 0, //主选择ID
				
				index: 0, //选择主还是辅
				columns: [],
				goods: [],
				show: false,
				
				data: '',
				queryParams: {
					pageNo: 1, //页码
					pageSize: 10, //条数
				},
				supplier: [], //供应商列表
				moneys: [],
				modelSupplier: {}, //供应商信息
				supplierGoods: [], //供应商商品信息
			}
		},
		onLoad() {
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('supplier', this.handleCustomEventBind);
			this.handleCustomEventBindGoods = this.handleCustomGoodsEvent.bind(this);
			uni.$on('supplierGoods', this.handleCustomEventBindGoods);
			this.getSimpleList() //获取供应商列表
			this.getWarehouses() //获取仓库信息
		},
		methods: {
			// 获取供应商列表
			async getSimpleList() {
				let res = await simpleList()
				this.supplier = res.data
			},
			// 确认领料
			submit() {
				this.loading = true
			},
			// 选择仓库确定
			confirm(e) {
				let b = this.moneys.filter(item => item.name == e.value[1])
				this.materials[this.index].warehouseId = b[0].id
				this.materials[this.index].name = b[0].name
				this.libraryShow = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 删除主原料
			handeleRemoveMaterials(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.materials.splice(index, 1)
						}
					}
				});
			},
			// 选择时间弹窗确定事件
			handeleDateConfirm(e) {
				this.data = e.value
				this.dateShow = !this.dateShow
			},
			handleGroups(index){
				this.$refs.warehouseRef.handleIsShow([],false)
				// this.libraryShow = true
				this.index = index
			},
			// 时间戳转换
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要加1
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 获取仓库信息
			async getWarehouses() {
				let response = await getWarehouse()
				this.moneys = response.data.list
				const arr = response.data.list.map(item => {
					return {
						id: item.parentId ? null : item.id,
						name: item.name,
						parentId: item.parentId,
					}
				})
				let objs = constructGroups(arr)
				this.columnslibrary = objs.columns
				this.columnData = objs.columnData
			},
			// 跳转至供应商列表
			handleSupplier() {
				uni.navigateTo({
					url: '/pages/work/store/supplierList'
				})
			},
			// 选择供应商商品
			handleSupplierGoods() {
				if (this.modelSupplier.id) {
					uni.navigateTo({
						url: '/pages/work/store/supplierGoods?id=' + this.modelSupplier.id
					})
				} else {
					uni.showToast({
						title: '请选择供应商',
						icon: 'none'
					})
				}
			},
			// 获取页面返回的供应商信息
			handleCustomEvent(val) {
				this.modelSupplier = val.data
			},
			// 获取供应商商品
			handleCustomGoodsEvent(val) {
				this.disabled = false
				this.materials = val.data.map(item=>{
					return{
						...item,
						name:'',
						warehouseId:''
					}
				})
			},
			// 库位选项
			handleSetValueName(val){
				console.log('materials:',this.materials[this.index]);
				console.log('库位选项:',val);
				this.materials[this.index].name = val.name
				this.materials[this.index].warehouseId = val.id
				
			}
		}
	}
</script>

<style scoped>
	.leftBlock{
		flex: 1;
		/* width: 500rpx; */
		min-height: 200rpx;
		/* background-color: #000; */
		display: flex;
		flex-wrap: wrap;
	}
	.scroll-Y {
		width: 100%;
		height: calc(100vh - 800rpx);
	}

	.goodsStyle {
		font-size: 26rpx;
		color: #999999;
		width: 500rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: end;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.goodName {
		width: 100%;
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.addGoods {
		margin-top: 20rpx;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #177A77;
		font-size: 26rpx;
	}

	.returnGoods {
		width: 750rpx;
		min-height: 200rpx;
	}

	.lib {
		width: 140rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.selectImage {
		width: 58rpx;
		height: 58rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.selectBlock {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		/* margin-bottom: 18rpx; */
	}

	.select {
		width:300rpx;
		/* flex: 1; */
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 14rpx;
		padding: 0rpx 19rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.selectActive {
		width:250rpx;
		/* flex: 1; */
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		padding: 0 21rpx;
		box-sizing: border-box;
	}

	.pickingTitles {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.pickingTitle {
		font-size: 24rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.pickingActive {
		width: 750rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.picking {
		width: 750rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		padding: 10rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
	}

	.submit {
		width: 100%;
		position: relative;
		margin-top: 50rpx;
	}

	.material {
		width: 750rpx;
		min-height: 130rpx;
		padding: 0rpx 29rpx 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.iners {
		width: 750rpx;
		height: 21rpx;
		display: flex;
		align-items: center;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.headerNumber {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.iner {
		width: 750rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.container {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}

	page {
		background-color: #F8F8F8;
	}
</style>